:root {
	--primary-color: #0066ff;
	--secondary-color: #ff8181;
	--placeholder-text-color: #a9a9a9;
	--border-color: #e7e7e7;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
		'Droid Sans', 'Helvetica Neue', 'PingFang SC', 'Microsoft Yahei', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

::placeholder {
	color: var(--placeholder-text-color);
}

input,
select,
textarea,
button {
	outline: none;
}

input,
select,
textarea {
	border: 1px solid #f1f0f0;
	border-radius: 4px;
}

input,
select {
	padding: 8px;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
	margin-right: 12px;
	margin-left: 3px;
}

fieldset {
	border: none;
}

img {
	max-width: 100%;
}

button {
	padding: 9px 26px;
	background: var(--primary-color);
	border-radius: 8px;
	border: none;
	color: white;
	cursor: pointer;
}

button.reverse {
	border: 1px solid var(--primary-color);
	background: none;
	color: unset;
}

a {
	color: var(--primary-color);
	text-decoration: none;
}

form {
	display: grid;
}

form > label {
	margin-top: 12px;
	margin-bottom: 8px;
}

form > label::after {
	content: '：';
}

ul {
	list-style: none;
}
